<template>
    <div>
        <basic-layout title="访客审批" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''" @load="onLoad">
                            <van-swipe-cell v-for="val in listData" :key="val.guideId">
                                <div class="cellContent">
                                    <div class="con" @click="$refs.visitorDetailRef.handleDetail(val)">
                                        <p class="tit">
                                            <b>
                                                {{ val.visitor || '-' }}
                                                <span v-if="val.visitorSexName">（{{val.visitorSexName}}）</span>
                                            </b>
                                            <a v-if="val.visitType === '01'" class="type">登记</a>
                                            <a v-if="val.visitType === '02'" class="type">预约</a>
                                            <span v-if="val.createTime" class="time">{{ val.createTime.slice(5, -3) }}</span>
                                        </p>
                                        <p class="reason">
                                            {{ val.visitReasonName }}来访
                                        </p>
                                    </div>
                                    <div class="con" @click="$refs.visitorDetailRef.handleDetail(val)">
                                        <p>
                                            <span class="label">联系电话：</span>
                                            <span>{{ $infoHiding.handlePhone(val.visitorPhone) }}</span>
                                        </p>
                                        <p>
                                            <span class="label">来访单位：</span>
                                            <span>
                                                {{val.visitorCorpName}}
                                                <span v-if="val.visitorsEntourageSaveList && val.visitorsEntourageSaveList.length">（{{val.visitorsEntourageSaveList.length + 1}}人）</span>
                                            </span>
                                        </p>
                                        <p>
                                            <span class="label">来访时间：</span>
                                            <span>{{val.visitTime}}</span>
                                        </p>
                                        <p>
                                            <span class="label">离开时间：</span>
                                            <span>{{val.departureTime}}</span>
                                        </p>
                                    </div>
                                    <div class="flexBtn">
                                        <p @click="handleNoAppove(val)">拒绝</p>
                                        <p @click="handleAppove(val)">允许</p>
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
        <!-- 详情 -->
        <visitorDetail ref="visitorDetailRef" @refresh="onRefresh()" />
    </div>
</template>

<script>
    import { pageForMyApproval, appove } from '@/api/srvAssurance/convaccess/visitorApproval';
    import visitorDetail from './visitorDetail.vue';

    export default {
        components: { visitorDetail },
        data () {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                fullscreenModal: false,
                formData: {
                    pageNum: 1,
                    pageSize: 20
                },
                listData: []
            };
        },
        created () {
            this.getListData();
        },
        methods: {
            // 获取列表数据
            getListData () {
                this.loading = true;
                pageForMyApproval(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh () {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 审批通过
            handleAppove (item) {
                this.$Dialog
                    .confirm({
                        title: "是否确定审批通过？",
                    }).then(() => {
                        appove({ visitorsId: item.visitorsId, appStatus: "2" }).then(res => {
                            if (res.code === 1000) {
                                this.$Notify({ type: "success", message: '审批成功！' });
                                this.onRefresh();
                            }
                        })
                    }).catch(() => { });
            },
            // 审批不通过
            handleNoAppove (item) {
                this.$Dialog
                    .confirm({
                        title: "是否确定审批不通过？",
                    }).then(() => {
                        appove({ visitorsId: item.visitorsId, appStatus: "3" }).then(res => {
                            if (res.code === 1000) {
                                this.$Notify({ type: "success", message: '审批成功！' });
                                this.onRefresh();
                            }
                        })
                    }).catch(() => { });
            }
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            padding: 0;
            .con {
                padding: 5px 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #eee;
                .tit {
                    font-size: 15px;
                    position: relative;
                    height: 30px;
                    b span {
                        font-size: 14px;
                    }
                    .time {
                        position: absolute;
                        right: 0;
                        top: 11px;
                        color: #aaa;
                        font-size: 13px;
                    }
                }
                .reason {
                    font-size: 13px;
                    color: #aaa;
                    line-height: 20px;
                }
                .type {
                    background: #f2a84e;
                    font-size: 9px;
                    color: #fff;
                    margin-left: 8px;
                    padding: 2px 3px;
                    border-radius: 3px;
                }
            }
            .flexBtn {
                display: flex;
                justify-content: space-between;
                p {
                    flex: 1;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    color: #4eb3e9;
                    font-size: 15px;
                }
                p:nth-of-type(1) {
                    box-sizing: border-box;
                    border-right: 1px solid #eee;
                    color: #f25454;
                }
            }
        }
    }
</style>